import { useRef, useState } from "react";
//登录|注册
function Login() {
  // const [phone, setphone] = useState("")
  //登录或者是注册页面的状态（在同一时间只能显示一个页面）
  let [flag, setflag] = useState(true)
  const userRef = useRef("")
  const userRef1 = useRef("")
  const passwordRef = useRef("")
  const CodeRef = useRef("")
  let randomNumRef = useRef("")
  //11位手机号码正则
  var reg_user = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
  //最短为4位密码正则
  var reg_pas = /^[a-zA-Z0-9_-]{4,18}$/;
  function checkSubmit(e) {
    if (userRef.current.trim() === "") {
      alert("您还没有填写手机号!");
      e.preventDefault();
    } else if (!reg_user.test(userRef.current)) {
      alert("您填写的手机号码格式错误,手机号的长度应该为11位且合法!");
      e.preventDefault();
    } else if (passwordRef.current.trim() === "") {
      alert("您还没有填写密码!");
      e.preventDefault();
    } else if (!reg_pas.test(passwordRef.current)) {
      console.log(passwordRef.current);
      alert("您填写的密码格式错误,密码长度为4至11位的数字或字母的组合!");
      e.preventDefault();
    }
  }

  function Module1(params) {
    return (<div>
      <form >
        <div className="form-group">
          <label for="exampleInputEmail1"><p className="text-dark">账户</p></label>
          <input type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="手机号/用户名/邮箱(目前仅支持手机号)"
            onKeyUp={e => userRef.current = e.target.value} />
        </div>
        <div className="form-group">
          <label for="exampleInputPassword1 "><p className="text-dark">密码</p></label>
          <input type="password" className="form-control" id="exampleInputPassword1" placeholder="请输入密码(放心，我们绝不会分享您的信息)"
            onKeyUp={e => passwordRef.current = e.target.value} />
        </div>
        <div className="form-group form-check" style={{ height: 40 + "px" }}>
          <input type="checkbox" className="form-check-input" id="exampleCheck1" />
          <label className="form-check-label" for="exampleCheck1"><p className="text-dark">记住密码</p></label>
        </div>
      </form>
      <a href="/" className="btn btn-primary" onClick={e => checkSubmit(e)}>登录</a>
      <button onClick={() => { setflag(flag = false) }} className="btn btn-primary">没有账户？立即免费注册</button>
    </div>)
  }
  function Module2(params) {
    return (<div>
      <form>
        <div className="form-group">
          <label for="exampleInputEmail1"><p className="text-dark">注册</p></label>
          <input type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="手机号" onKeyUp={e => userRef1.current = e.target.value} />
        </div>
        <div className="form-group">
          <label for="exampleInputPassword1"><p className="text-dark">验证码</p></label>
          <input type="password" className="form-control" id="exampleInputPassword1" placeholder="请输入验证码" onKeyUp={e => CodeRef.current = e.target.value} />
          <a href="#" className="btn btn-primary" onClick={() => {
            randomNumRef.current = Math.floor(Math.random() * 9000) + 1000
            alert(`【雪球】您正在使用短信认证，验证码:` + randomNumRef.current, 'success')
          }}> 获取验证码</a>
        </div>
      </form>
      <a href="/login" className="btn btn-primary" onClick={e => {
        if (!reg_user.test(userRef1.current)) {
          alert("您填写的手机号码格式错误,手机号的长度应该为11位且合法!"); e.preventDefault();
        } else if (CodeRef.current != randomNumRef.current || CodeRef.current === "") {
          alert("验证码错误!" + CodeRef.current + randomNumRef.current); e.preventDefault();
        }
      }}>注册</a>
      <button onClick={() => { setflag(flag = true) }} className="btn btn-primary">已有账户登录</button>
    </div>)
  }

  return (
    <div className="shadow p-3 mb-5 bg-body-tertiary rounded" style={{ width: 400 + "px" }}> <span></span>
      <div className="Login" style={{ border: "1px solid #ccc!important", padding: "14px;border-radius: 16px!important", backgroundColor: "rgba(255, 255, 255, 0.5)" }}>
        {flag ? <Module1 /> : <Module2 />}
        <div>
          <p className="text-black-50 fs-6"><input type="checkbox" checked />
            我已同意《雪球用户协议》《雪球服务条款》《雪球免责声明》《雪球隐私政策》</p>
        </div>
      </div >
    </div>
  );
}

export default Login;
